import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import './index.css';
import App from './App';
import { MainContextProvider} from './context/MainContext';

import Input from './components/Input';
import Textarea from './components/Textarea';
import Invoices from './components/Invoices';
import InvoiceDetail from './components/InvoiceDetail';
import Expenses from './components/Expenses';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <React.StrictMode>
    <MainContextProvider>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<App/>}>
            <Route path='/input' element={<Input/>}></Route>
            <Route path='/textarea' element={<Textarea/>}></Route>
            <Route path='/invoices' element={<Invoices/>}>
              <Route
                index
                element={<Empty><>请选择发票</></Empty>}
              ></Route>
              <Route path=':invoiceId' element={<InvoiceDetail></InvoiceDetail>}></Route>
            </Route>
            <Route path='/expenses' element={<Expenses/>}></Route>
            <Route path="*" element={<Empty/>}></Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </MainContextProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

function Empty({
  children
}){
  return <main style={{ padding: "1rem" }}>
            {
              children
              ? <>{children}</>
              : <p>404</p>
            }
          </main>
}